 var btnLeft = document.querySelector(".left-btn");
 var img = document.querySelector(".bg img");
 btnLeft.addEventListener("click", function(e) {

     var imageName = img.src;
     console.log(img.src);
     var arr = imageName.split(".");
     var indexArr = arr[arr.length - 2].split("/");
     console.log(indexArr);
     var index = indexArr[indexArr.length - 1];
     console.log(index);

     index = index - 1;
     if (index <= 0) {
         index = 3;
     }
     console.log(index);

     img.src = "img/" + index + ".jpg";
 })

 var btnRight = document.querySelector(".right-btn");
 btnRight.addEventListener("click", function(e) {

         var imageName = img.src;
         console.log(img.src);
         var arr = imageName.split(".");
         var indexArr = arr[arr.length - 2].split("/");
         console.log(indexArr);
         var index = indexArr[indexArr.length - 1];
         console.log(index);


         index = Number(index) + 1;
         if (index >= 4) {
             index = 1;
         }
         console.log(index);


         img.src = "img/" + index + ".jpg";
     })
     // var btn1 = $("#btn1");
     // btn1.on("click", function(e) {
     //         img.src = "img/1.jpg";
     //     })
 var btn1 = document.querySelector("#btn1")
 btn1.addEventListener("click", function(e) {
     img.src = "img/1.jpg";
 })
 var btn2 = document.querySelector("#btn2")
 btn2.addEventListener("click", function(e) {
     img.src = "img/2.jpg";
 })
 var btn3 = document.querySelector("#btn3")
 btn3.addEventListener("click", function(e) {
     img.src = "img/3.jpg";
 })